<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5-任务列表</title>
</head>

<body>
    <div>
        <input id="todoMsg" type="text" width='200'></input>
        <input id="saveMsg" type="button" value="保存" />
        <input id="clearMsg" type="button" value="清空本地存储" />
        <p style="color: #286090;font-size: 20px;">任务列表</p>

        <hr />
        <div id="todoList"></div>

    </div>

    <!-- <script src="https://code.jquery.com/jquery-1.11.1.js"></script> -->

    <script>

        window.onload = function () {
            saveMsg.onclick = inpFunc
            clearMsg.onclick = empty
        }
        // 从本地存储加载任务列表
        var msgList = localStorage.getItem("msgList");

        if (msgList !== null && msgList !== undefined && msgList != '') {
            // 展示任务列表
            document.getElementById("todoList").innerHTML = msgList;

        }
        // 添加并保存单个任务
        function inpFunc() {
            var todoMsg = document.getElementById("todoMsg").value;
            if (todoMsg == null || todoMsg == '') {
                alert("请输入任务")
                return;

            }
            var todoMsgHtml = '<h5><span style="color: red">任务:</span>' + todoMsg + '<button onclick="del()">删除</button></h5>';
            // 追加到任务列表
            msgList = (msgList == null ? '' : msgList) + todoMsgHtml;
            localStorage.setItem("msgList", msgList);
            // 刷新任务列表
            document.getElementById("todoList").innerHTML = msgList;
        }

            // 清空任务列表并刷新浏览器
            function empty() {
                localStorage.clear();
                document.getElementById("clearMsg").innerHTML = "";
                location.reload();
            }
            function del(){
                console.log(11);
                localStorage.removeItem()
            }
    </script>

</body>

</html>